<script lang="ts" setup>
// 引入 echarts
import { MonthlyActive } from '@/assets/api/ecommercedataanalysisservice_0_0_1';
import { fitChartSize } from '@/utils/flex-size-utrils';
import { CurMonth, CurYear } from '@/utils/time-utils';
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';

const props = defineProps<{
    monthly_active_datas: Array<MonthlyActive>
}>();


// 创建 dom 的对象
const chart = ref<HTMLDivElement>();

// chart 的对象实例
let myChart: echarts.ECharts | undefined;

const datas: {
    xaxis_data: Array<string>,
    series_data: Array<any>
} = {
    xaxis_data: [],
    series_data: []
}

watch(() => props.monthly_active_datas, () => {
    const curYear = CurYear();
    const curMonth = CurMonth();
    datas.xaxis_data = []
    datas.series_data = []

    console.log(curMonth)
    
    // 构建字符串
    for (let ele of props.monthly_active_datas) {
        datas.xaxis_data.push(curYear + "-" + ele.month.toString().padStart(2, "0"))
        //  当前月份绿色高亮
        
        if (ele.month === curMonth) {
            datas.series_data.push({          // 3 月的数值使用特殊样式
                value: ele.num ,                // 数据值
                itemStyle: {               // 自定义样式
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 渐变方向，从上到下
                        [
                            { offset: 1, color: 'rgba(142,194,115,0)' }, // 0% 处的颜色
                            { offset: 0.5, color: '#8EC273' },
                            { offset: 0, color: '#8EC273' }  // 100% 处的颜色
                        ]
                    )
                }
            })
        } else {
            datas.series_data.push(ele.num)
        }
    }
    console.log(datas)
    doRender()
});


const doRender = () => {
    let option = {
        grid: {
            left: '2%',         // 设置左边距为容器宽度的 10%
            right: '10%',        // 设置右边距为容器宽W度的 10%
            top: '10%',          // 设置上边距为容器高度的 15%
            bottom: '2%',       // 设置下边距为容器高度的 15%
            containLabel: true   // 确保轴标签显示完整
        },

        // 设置标题
        title: [
            {
                text: '月度用户活跃表',
                textStyle: {
                    fontSize: fitChartSize(14), // 标题的文字大小
                    color: "white"
                }
            }
        ],
        // 配置 X 轴
        yAxis: {
            type: 'category',  // X 轴类型为类目轴，适合离散型数据
            // inverse: true,
            axisLabel: {
                fontSize: fitChartSize(14), // 字体大小
            },
            // splitLine: {
            //     show: false
            // },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
            // data: [            // 定义 X 轴的类目数据（如月份）
            //     '2024-01', '2024-02', '2024-03', '2024-04',
            //     '2024-05', '2024-06', '2024-07', '2024-08',
            //     '2024-09', '2024-10', '2024-11', '2024-12'
            // ]
            data: datas.xaxis_data
        },
        // 配置 Y 轴
        xAxis : {
            type: 'value',      // Y 轴类型为数值轴，适合连续型数据
            axisLabel: {
                fontSize: fitChartSize(12) // 字体大小
            },
    
            splitLine: {
                show: false
            },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
        },

        // 配置系列数据
        series: [
            {
                type: 'bar',    // 系列类型为柱状图
                // data: [        // 定义系列中的数据
                //     120,       // 1 月的数值
                //     200,       // 2 月的数值
                //     {          // 3 月的数值使用特殊样式
                //         value: 150,                // 数据值
                //         itemStyle: {               // 自定义样式
                //             color: new echarts.graphic.LinearGradient(
                //                 1, 1, 0, 0, // 渐变方向，从上到下
                //                 [
                //                     { offset: 1, color: 'rgba(84,101,186,0)' }, // 0% 处的颜色
                //                     { offset: 0.5, color: '#8EC273' },
                //                     { offset: 0, color: '#8EC273' }  // 100% 处的颜色
                //                 ]
                //             )
                //         }
                //     },
                //     70, 80, 70, 110, 130,          // 4 月到 8 月的数值
                //     80, 70, 110, 130, 110          // 9 月到 12 月的数值
                // ],
                data:datas.series_data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        1, 1, 0, 0, // 渐变方向，从上到下
                        [
                            { offset: 1, color: 'rgba(84,101,186,0)' }, // 0% 处的颜色
                            { offset: 0.5, color: '#5465BA' },
                            { offset: 0, color: '#5465BA' }  // 100% 处的颜色
                        ]
                    )
                }
            }
        ],

    };
    // 使用配置项生成图表
    myChart.setOption(option);
}
// 
const onHandlerWindowResize = () => {
    if (!myChart) {
        return;
    }
    // 重新设置字体大小   
    doRender();
    // 调整大小
    myChart.resize();
};

// 组件加载完成后加载的对象
onMounted(() => {
    // 固定用法，需要使用 chart.value
    myChart = echarts.init(chart.value);
    // 渲染出来
    doRender();
    // 监听窗口大小变化的事件
    window.addEventListener('resize', onHandlerWindowResize);
});
onBeforeUnmount(() => {
    // 组件销售时,退出监听
    window.removeEventListener('resize', onHandlerWindowResize);
});
</script>

<template>
    <!-- ref 是一个 就是获取到 dom 对象 -->
    <div class="year-revenu-chart-wrapper">
        <div ref="chart" class="year-revenu-chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.year-revenu-chart-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
    padding: vw(10);

    .year-revenu-chart {
        width: 100%;
        height: 100%;
        padding: vw(10);
        // 设置又名都
        background: rgba(42, 30, 55, 0.3);
    }
}
</style>